<template>
  <div class="taskPage">
    <div class="filterVue">
      <div style="display: flex">
        <div class="filter">
          <span style="padding-right: 10px">任务单号</span>
          <el-input
            v-model="params.stocktakingTaskNo"
            placeholder="请输入"
            style="margin-left: 10px; width: 190px"
            @input="input"
          ></el-input>
        </div>
        <div class="filter">
          <span style="padding-right: 10px">盘点门仓</span>
          <el-cascader
            v-model="storeId"
            :options="storeList"
            :props="{ expandTrigger: 'hover', value: 'id', label: 'name' }"
            @change="handleTransferOutStoreChange"
          ></el-cascader>
        </div>

        <div class="filter">
          <div style="padding-right: 10px">任务状态</div>
          <el-select v-model="params.status" placeholder="请选择">
            <el-option v-for="item in status_arr" :key="item.value" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </div>
        <div style="display: flex">
          <div class="btn1" @click="search">查询</div>
          <div class="btn1" @click="clearAll">清空</div>
        </div>
      </div>
      <div class="addBtn" @click="toCreate">新增任务</div>
    </div>
    <div class="tableVue">
      <div class="tableList">
        <div class="thVue">
          <div class="th">任务单号</div>
          <div class="th">盘点门仓</div>
          <div class="th">盘点商品</div>
          <div class="th">应盘库存</div>
          <div class="th">创建人</div>
          <div class="th">截止日期</div>
          <div class="th">任务状态</div>
          <div class="th">创建时间</div>
          <div class="th">操作</div>
        </div>
        <div class="tdVue">
          <div class="tdItem" v-for="(item, index) in list" :key="index">
            <div class="td">{{ item.stocktakingTaskNo }}</div>
            <div class="td">{{ item.storeName }}</div>
            <div class="td line-1" :title="item.categoryStr">{{ item.categoryStr }}</div>

            <div class="td">{{ item.expectStock }}</div>
            <div class="td">{{ item.createName }}</div>
            <div class="td">{{ item.deadline }}</div>
            <div class="td" :style="{ color: ['#E37318', '#00A870', '#A6A6A6'][item.status] }">
              {{ status_arr[item.status].name }}
            </div>
            <div class="td">{{ item.createTime }}</div>
            <div class="td">
              <span style="color: #2752dd; cursor: pointer" @click="toDetail(item.id)">详情</span>
              <!-- <span style="color: #2752dd; padding: 0 15px; cursor: pointer"></span>
              <span style="color: #e34d59; cursor: pointer" @click="toDelete(item.id)">删除</span> -->
            </div>
          </div>
        </div>
        <div class="paginationVue">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="params.limit"
            @current-change="pageChange"
          ></el-pagination>
        </div>
      </div>
    </div>
    <taskDetail :drawer="iaTask" @beforeClose="iaTask = false" ref="child" @toDelete="toDelete"></taskDetail>
  </div>
</template>

<script>
import { stocktakingList, stocktakingDel, stocktakingUpdata } from '@/api/msg';
import { listStore } from '@/api/commercial';
import taskDetail from './taskDetail.vue';
export default {
  components: { taskDetail },
  data() {
    return {
      params: {
        stocktakingTaskNo: '',
        limit: 20,
        page: 1,
        status: '',
        storeId: '',
        type: "",
      },
      storeId: "",
      list: [],
      storeList: [
        { name: '仓库', id: 1, children: [] },
        { name: '门店', id: 2, children: [] },
      ],
      options: [],
      value: '',
      total: 0,
      iaTask: false,
      status_arr: [
        {
          name: '未完成',
          value: 0,
        },
        {
          name: '已完成',
          value: 1,
        },
        {
          name: '已作废',
          value: 2,
        },
      ],
    };
  },
  created() {
    this.getList();
    this.getStoreList();
  },
  methods: {
    search() {
      this.params.page = 1;
      this.getList();
    },
    clearAll() {
      this.params = {
        stocktakingTaskNo: '',
        limit: 15,
        page: 1,
        status: '',
        storeId: '',
        type: "",
      };
      this.storeId = ""
      this.params.page = 1;
      this.getList();
    },
    input() {
      if (!this.params.stocktakingTaskNo) {
        this.params.page = 1;
        this.getList();
      }
    },
    getList() {
      stocktakingList(this.params).then((res) => {
        this.list = res.list;
        this.total = res.total;
        console.log('盘点列表', this.list);
      });
    },

    getStoreList() {
      // 类型(1仓库 2门仓)
      listStore({ type: 1, page: 1, limit: 999 }).then((res) => {
        this.storeList[0].children = res.list;
      });
      listStore({ type: 2, page: 1, limit: 999 }).then((resr) => {
        this.storeList[1].children = resr.list;
      });
    },

    toDetail(id) {
      this.iaTask = true;
      this.$refs.child.getDetail(id);
    },

    todo(id) {
      this.$confirm('确定要作废该盘点任务吗?', '作废盘点任务', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        stocktakingUpdata({
          id: id,
        }).then((res) => {
          this.$message({
            type: 'success',
            message: '操作成功!',
          });
          this.params.page = 1;
          this.getList();
        });
      });
    },
    toDelete(id) {
      this.$confirm('确定删除该盘点任务吗?', '删除盘点任务', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        stocktakingDel({
          id: id,
        }).then((res) => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
          this.params.page = 1;
          this.getList();
        });
      });
    },
    toCreate() {
      this.$router.push({ name: 'oprationCreate' });
    },
    handleTransferOutStoreChange(val) {
      console.log(val)
      this.storeId = val
      this.params.type = val[0];
      this.params.storeId = val[1];
      console.log("hhhhhhhh", this.params.storeId)
    },
    pageChange(e) {
      console.log(e);
      this.params.page = e;
      this.getList();
    },
  },
};
</script>

<style lang="scss">
.taskPage {
  width: 100%;
  height: calc(100vh - 186px);
  background: #fff;
  .filterVue {
    width: 100%;
    height: 62px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    .filter {
      display: flex;
      align-items: center;
      padding-right: 30px;
    }
    .btn1 {
      width: 60px;
      height: 32px;
      border-radius: 4px;
      line-height: 32px;
      text-align: center;
      background: #2561ef;
      color: #fff;
      margin-right: 10px;
      cursor: pointer;
    }
    .addBtn {
      width: 100px;
      height: 32px;
      border-radius: 4px;
      line-height: 32px;
      text-align: center;
      background: #2561ef;
      color: #fff;
      margin-right: 10px;
      cursor: pointer;
    }
  }
  .tableVue {
    flex: 1;
    height: calc(100vh - 186px - 62px);
    .thVue {
      width: 100%;
      display: flex;
      height: 70px;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
      .th {
        flex: 1;
        color: #333333;
        font-weight: 600;
        text-align: center;
      }
      .th:nth-last-child(1) {
        width: 250px;
      }
    }
    .tdVue {
      width: 100%;
      height: calc(100vh - 186px - 62px - 70px - 60px);
      overflow-y: scroll;
      .tdItem {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        .td {
          flex: 1;
          text-align: center;
        }
        .td:nth-last-child(1) {
          width: 250px;
        }
      }
    }
    .tdVue::-webkit-scrollbar {
      width: 0;
    }
    .paginationVue {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
